{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
<html>
<body style="background-color:#E8E8E8;">

<head>
<meta charset="UTF-8">
<title>Embedded Style Sheet</title>
<style type="text/css">
    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 5px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 1;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #0000FF;
        cursor: pointer;
    }
    .slider::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #0000FF;
        cursor: pointer;
    }
 </style>
 </head>
</body>
 </html>
{% endblock %}

{% block content %}
    <input type="hidden" name="cut_value" id="cut_value"/>
<div class="textdiv">
    <p>切蛋糕<br>
        介绍:
        现在有一块蛋糕需要你和另外一个人进行分配， 且无任何外部影响因素，<br>
        你们两个人也无任何交集，彼此之间都是陌生人，<br>
        那么在这种情况下，你想要为自己争取百分之多少的蛋糕额度？<br>
    </p>
    <p>
        请拖动蓝色圆圈来划分您想要的蛋糕额度 以蓝色拖动条为界
        左面是您想要的蛋糕额度 右面是您想留给他的蛋糕额度
    </p>
</div>
<div class="pagecontent">
    <div class="container1">
            <div class="rectangle_white_header"></div>
            <div class="rectangle_red_cake"></div>
            <div class="slim_rectangle" id="slim"></div>#滑动条
    </div>
    <div class="container2">
        <input type="range" min="0" max="100" value="0" class="slider" id="slider" >
    </div>
    <div class="piece_left">
        <font size="+1"> <p>你分得的蛋糕: <span id="value1">%</span>%</p> </font>
    </div>
    <div class="piece_right">
        <font size="+1"> <p>你队友分得的蛋糕: <span id="value2">%</span>%</p> </font>
    </div>
    <div class ="button_div">
        <button type="submit" class="otree-btn-next btn btn-primary next-button otree-next-button">Cut</button>
    </div>
</div>

<script type="text/javascript">

        var slidervalue = document.getElementById("slider");
        var output1 = document.getElementById("value1");
        output1.innerHTML = 0;

        var output2 = document.getElementById("value2");
        output2.innerHTML = 100;

        var cut_value = document.getElementById("cut_value");
        cut_value.value = 0;

        {#function myFunction(){#}
        {##}
        {#    var nudge = 0;#}
        {#    var x = 0;#}
        {#    while( x < 100 ){#}
        {#        nudge++;#}
        {#        x=nudge#}
        {#    }#}
        {##}
        {#    slidervalue.value = nudge;#}
        {##}
        {#    var x = slidervalue.value - 1#}
        {#    var str1 = "" + x;#}
        {#    var str2 = "px";#}
        {#    document.getElementById("slim").style.left = str1.concat(str2);#}
        {##}
        {#    if (slidervalue.value <=100) {#}
        {#        output1.innerHTML = this.value;#}
        {#        output2.innerHTML = 100-this.value;#}
        {#        cut_value.value = slidervalue.value;#}
        {#    }#}
        {##}
        {##}
        {##}
        {#}#}
        slidervalue.oninput = function() {
            var x = this.value*6 - 1
            var str1 = "" + x; //这里*6 滑条也*6了
            var str2 = "px";
            document.getElementById("slim").style.left = str1.concat(str2);

            if (this.value<=100){
                output1.innerHTML = this.value;//Value of left piece
                output2.innerHTML = 100-this.value;//Value of right piece: 500
                cut_value.value = this.value;
            }

        }

</script>


{% endblock %}

{% block styles %}
    <style>
    .pagecontent {
        width: 600px;
        height: 800px;
        border: 0px;
        position: relative;
    }
    .textdiv {
        width: 900px;
        height: 300px;
        border: 0px;
        position: relative;
        text-align:center
    }
    .container1 {
        width: 600px;
        height: 180px;
        border: 1px;
        position: absolute;
        top: 0px;
        left: 140px;
    }
    .container2 {
        width: 620px;
        height: 15px;
        border: 1px;
        position: absolute;
        top: 165px;
        left: 130px;
    }
    .piece_left {
        position: absolute;
        top: 190px;
        left: 160px;
    }
    .piece_right {
        position: absolute;
        top: 190px;
        right: -120px;
    }

    .button_div {
        position: relative;
        top: 220px;
        left: 140px;
    }
    .button_div_nudge {
        position: relative;
        top: 180px;
        left: 220px;
    }
    .rectangle_white_header {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 130px;
        width: 600px;
        background-color: #FFFFFF;
    }
    .rectangle_red_cake {
        position: absolute;
        top: 130px;
        left: 0px;
        height: 50px;
        width: 600px;
        background-color: #B22222;
    }
    .slim_rectangle {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 180px;
        width: 3px;
        background-color: #0000FF;
    }

    </style>
{% endblock %}


